import React, { ReactElement } from 'react'
import UpLoad from './upload'
import { Input } from 'antd'
import { connect } from 'umi'
import styles from './HeroCard.less'

interface Props {
    setShipinVal: Function
}

function Recommend({ setShipinVal }: Props): ReactElement {  
    // title 标题
    // video 视频 
    // submit 投稿
    // fan  粉丝
    // view  观看次数
    const arr = [
        {
            title: "标题",
            type: "title",
        },
        {
            title: "视频",
            type: "video",
        },
        {
            title: "投稿",
            type: "submit",
        },
        {
            title: "粉丝",
            type: "fan",
        },
        {
            title: "观看次数",
            type: "view",
        }
    ]
    return (
        <div>
            {
                arr.map((item, index) => {
                    return <div className={ styles.flex } key = { index }>
                        <span>
                            { item.title }
                        </span>
                        <div>
                            { item.type === 'video'? <UpLoad/>: <Input onChange={(ev) => {
                                setShipinVal(item.type, ev.target.value)
                            }}/> }
                        </div>
                    </div>
                })
            }
            
        </div>
    )
}

const mapState = (state: any) => {
    return {
        
    }
}

const mapDispatch = (dispatch: any) => {
    return {
        setShipinVal(com: string, value: string ) {
            dispatch({ type: "heroCard/setShipinVal", com, value })
        }
    }
}

export default connect(mapState, mapDispatch)(Recommend)
